<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 外部样式表 -->
		<link rel="stylesheet" href="css/new_file_style.css" type="text/css" />
		<style type="text/css">
			/* p {
				color: #007AFF;
				font-weight: bold;
			}

			#test {
				color: #4CD964;
				font-size: 30px;
			}

			.test_class {
				color: red;
			}

			[align="bottom"] {
				color: greenyellow;
				font-weight: 200;
				font-size: 40px;
			}

			[name|="t"] {
				color: cyan;
			}

			[name~="t1"] {
				color: red;
			}

			p {
				color: orange
			} */
		</style>
	</head>
	<body>
		<p>HTML选择器测试专用</p>
		<p id="test" align="center">ID选择器测试<span>专用</span>段落</p>
		<p class="test_class">类选择器测试专用代码</p>
		<p id="t" align="bottom">属性选择器测试专用代码1</p>
		<p align="center" name="t-t1">属性选择器测试专用代码2</p>
		<p align="top" name="t t1">属性选择器测试专用代码3</p>
		<p style="color:plum">这是一个段落，应用了直接样式表</p>
		<p>这是一个段落，应用了内部样式表</p>
		<span>这是一个测试内容</span>
		<p>段落<span>段内</span>段落</p>
		<div id="app">
			<!-- 变量 -->
			{{message}}{{name}}
		</div>
		<!-- 脚本 -->
		<script type="text/javascript">
			/* 应用对象 */
			var app = new Vue({
				/* 元素 */
				el: '#app',
				/* 保存数据 定义好的变量要在data中声明*/
				data: {
					message: '测试我的第一个vue',
					name: 3
				}
			});
		</script>
	</body>
</html>
